<template>
  <div>
    <!-- 两句诗 -->
    <div class="my-animation-slide-top">
      <TwoPoem></TwoPoem>
    </div>

    <div
      style="background: var(--background); padding-top: 40px"
      class="my-animation-slide-bottom"
    >
      <!-- 标签 -->
      <div
        class="sort-warp shadow-box"
        v-if="!$common.isEmpty(sort) && !$common.isEmpty(sort.labels)"
      >
        <div
          v-for="(label, index) in sort.labels"
          :key="index"
          :class="{
            isActive: !$common.isEmpty(labelId) && parseInt(labelId) === label.id,
          }"
          @click="listArticle(label)"
        >
          <proTag
            :info="label.labelName + ' ' + label.countOfLabel"
            :color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
            style="margin: 12px"
          >
          </proTag>
        </div>
      </div>

      <!-- 文章 -->
      <div class="article-wrap">
        <ArticleList :articleList="articles"></ArticleList>
        <div class="pagination-wrap">
          <div
            @click="pageArticles()"
            class="pagination"
            v-if="pagination.total !== articles.length"
          >
            下一页
          </div>
          <div v-else style="user-select: none">~~到底啦~~</div>
        </div>
      </div>
      <!-- 页脚 -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, reactive, getCurrentInstance, nextTick } from "vue";
import { useRoute } from "vue-router";
import TwoPoem from "@/pages/navbar/common/TwoPoem.vue";
import ProTag from "@/pages/navbar/common/ProTag.vue";
import ArticleList from "@/pages/navbar/common/ArticleList.vue";
import Footer from "@/pages/navbar/common/Footer.vue";
import { reqArticleInfo } from "@/api/webInfo";
import useWebInfoStore from "@/store/modules/webInfo";

let $route = useRoute();
let webInfoStore = useWebInfoStore();

const { proxy } = getCurrentInstance();

const route = useRoute();

const sortId = ref($route.query.sortId);
const labelId = ref($route.query.labelId);

const sort = ref(null);

const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
  searchKey: "",
  sortId: $route.query.sortId,
  labelId: $route.query.labelId,
});

const articles = ref([]);

const pageArticles = () => {
  pagination.current++;
  getArticles();
};

const getSort = () => {
  let sortInfo = webInfoStore.sortInfo;
  if (!proxy.$common.isEmpty(sortInfo)) {
    let sortArray = sortInfo.filter((f) => {
      return f.id === parseInt(sortId.value);
    });
    if (!proxy.$common.isEmpty(sortArray)) {
      sort.value = sortArray[0];
    }
  }
};

const listArticle = async (label) => {
  labelId.value = label.id;
  pagination = {
    current: 1,
    size: 10,
    total: 0,
    searchKey: "",
    sortId: $route.query.sortId,
    labelId: label.id,
  };

  articles.value.splice(0, articles.value.length);
  await nextTick();
  getArticles();
};

const getArticles = async () => {
  let result = await reqArticleInfo(pagination);
  if (result.code == 200) {
    articles.value = articles.value.concat(result.data.records);
    pagination.total = result.data.total;
  } else {
    ElMessage({
      type: "error",
      message: error.message,
    });
  }
};

watch(
  [() => $route.query.sortId, () => $route.query.labelId],
  ([sortId, labelId], [prevSortId, prevLabelId]) => {
    pagination.current = 1;
    pagination.size = 10;
    pagination.total = 0;
    pagination.searchKey = "";
    pagination.sortId = sortId;
    pagination.labelId = labelId;

    articles.value.splice(0, articles.value.length);

    sortId.value = sortId;
    labelId.value = labelId;

    getSort();
    getArticles();
  }
);

onMounted(() => {
  getSort();
  getArticles();
});
</script>

<style scoped>
.sort-warp {
  width: 70%;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}

.article-wrap {
  width: 70%;
  margin: 40px auto;
  min-height: 600px;
}

.isActive {
  animation: scale 1.5s ease-in-out infinite;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}

@media screen and (max-width: 900px) {
  .sort-warp {
    width: 90%;
  }

  .article-wrap {
    width: 90%;
  }
}
</style>
